import lodash from 'lodash'
import { mapGetters } from 'vuex'
export default {
    data () {
      return {
        $_sidebarElm: null,
        $_resizeHandler: null
      }
    },
    mounted () {
      this.$_resizeHandler = lodash.debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      this.$_initResizeEvent()
      this.$_initSidebarResizeEvent()
    },
    computed: {
      ...mapGetters(['sideCollapsed'])
    },
    beforeDestroy () {
      this.$_destroyResizeEvent()
      this.$_destroySidebarResizeEvent()
    },
    //  keep-alive
    activated () {
      const { chart } = this
      chart && chart.resize()
      this.$_initResizeEvent()
      this.$_initSidebarResizeEvent()
    },
    deactivated () {
      this.$_destroyResizeEvent()
      this.$_destroySidebarResizeEvent()
    },
    methods: {
      $_initResizeEvent () {
        window.addEventListener('resize', this.$_resizeHandler)
      },
      $_destroyResizeEvent () {
        window.removeEventListener('resize', this.$_resizeHandler)
      },
      $_sidebarResizeHandler (e) {
        if (e.propertyName === 'width') {
          this.$_resizeHandler()
        }
      },
      $_initSidebarResizeEvent () {
        this.$_sidebarElm = document.getElementsByClassName('ant-pro-sider-menu')[0]
        this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
      },
      $_destroySidebarResizeEvent () {
        this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
      }
    }
  }
